<template>
  <div class="wrap">
    <Navbar :appTitle="title" />
    <div class="wrap">
      <div class="head">
        <p class="title">
          <span>生产订单编号：</span>
          <span>{{ detailData.code }}</span>
        </p>
        <p class="content">
          <span class="key">生产商品：</span>
          <span class="value"
            >{{ detailData.goodsCode }}｜{{ detailData.goodsName }}｜{{
              detailData.spec
            }}</span
          >
        </p>
        <p class="content">
          <span class="key">承诺交期：</span>
          <span class="value">{{ detailData.promiseDate }}</span>
        </p>
        <p class="content">
          <span class="key">计划生产数量：</span>
          <span class="value">{{ detailData.planProductNumUnitText }}</span>
        </p>
        <span class="label" style="padding: 0.01rem 0.1rem"
          >{{ detailData.craftCode }}｜{{ detailData.craftName }}</span
        >
      </div>
      <div>
        <div
          class="box"
          v-for="(item, index) in detailData.erpProductSchedulingInfoListVo"
          :key="index"
        >
          <div class="title">
            <span class="icon"></span>
            <span class="titlekey">{{ item.processName }}</span>
          </div>
          <div class="body">
            <div>
              <p class="titles">
                <span style="color: #f25643">*</span>派工方式
              </p>
              <van-field value="派工到班组" right-icon="arrow" disabled />
              <div class="bottomLine"></div>
            </div>

            <div style="margin-top: 0.1rem">
              <p class="titles"><span style="color: #f25643">*</span>班组</p>
              <van-field-select-picker
                label=""
                placeholder="请选择"
                v-model="formData[index].operationTeamId"
                :columns="columnsa"
                :option="{ label: 'title', value: 'value' }"
              />
              <div class="bottomLine"></div>
            </div>
            <div style="margin-top: 0.1rem">
              <p class="titles" style="padding-left: 0.07rem">生产设备</p>
              <van-field-select-picker
                label=""
                placeholder="请选择"
                v-model="formData[index].deviceId"
                :columns="columnsb"
                :option="{ label: 'title', value: 'value' }"
              />
              <div class="bottomLine"></div>
            </div>
            <div style="margin-top: 0.1rem">
              <p class="titles">
                <span style="color: #f25643">*</span>计划开始日期
              </p>
              <dateTime
                title="计划开始时间"
                :value="formData[index].planStartTime"
                @confirmTime="
                  (v) => {
                    formData[index].planStartTime = v;
                  }
                "
              />
              <div class="bottomLine"></div>
            </div>
            <div style="margin-top: 0.1rem">
              <p class="titles">
                <span style="color: #f25643">*</span>计划结束日期
              </p>
              <dateTime
                title="计划结束日期"
                :value="formData[index].planEndTime"
                @confirmTime="
                  (v) => {
                    formData[index].planEndTime = v;
                  }
                "
              />
            </div>
          </div>
        </div>
        <div style="height: 1rem; background: #f5f5f5"></div>
      </div>
    </div>

    <div class="subimtForm">
      <van-button
        class="button"
        :loading="loading"
        type="info"
        @click="subimtForm"
        >提交</van-button
      >
    </div>
  </div>
</template>

<script>
import Navbar from "@/components/navBar/navBar_right";
import { getAction, postAction } from "@/api/manage";
import dateTime from "@/components/form/dateTime";
import VanFieldSelectPicker from "@/components/ActionSheet/VanFieldSelectPicker";
import { compareDate } from "@/utils/util";
export default {
  name: "proOrderDetail",
  components: { Navbar, dateTime, VanFieldSelectPicker },
  data() {
    return {
      title: this.$route.meta.title,
      detailData: {},
      type: this.$route.query.type,
      formData: [],
      columnsa: [], //班组
      columnsb: [], //设备
      loading: false,
    };
  },
  computed: {},
  mounted() {},
  created() {
    getAction("/planmgt/erpProductScheduling/manualScheduling", {
      id: this.$route.query.id,
    }).then((res) => {
      this.detailData = res.result;
      this.formData = res.result.erpProductSchedulingInfoListVo;
      console.log(res, this.formData);
    });
    getAction("/mess/device/queryOptionList", {
      pageNo: 1,
      pageSize: 999,
      isDelete: 0,
    }).then((res) => {
      this.columnsb = res.result.records.map((e) => {
        return {
          title: e.title,
          value: e.value,
        };
      });
    });
    getAction("/mess/teamGroup/queryOptionList", {
      pageNo: 1,
      pageSize: 999,
      isDelete: 0,
    }).then((res) => {
      this.columnsa = res.result.records.map((e) => {
        return {
          title: e.title,
          value: e.value,
        };
      });
    });
  },
  methods: {
    confirmTime(v) {
      console.log(v, "时间");
    },
    subimtForm() {
      for (let i = 0; i < this.formData.length; i++) {
        if (
          compareDate(
            this.formData[i].planStartTime,
            this.formData[i].planEndTime
          )
        ) {
          return this.$toast("计划开始时间不能大于计划结束时间");
        }
      }
      const {
        goodsId,
        id,
        planProductNum,
        planProductNumUnit,
        processRouteId,
      } = this.detailData;
      let par = {
        erpProductSchedulingInfoListDto: this.formData,
        goodsId,
        id,
        planProductNum,
        planProductNumUnit,
        processRouteId,
      };
      this.loading = true;
      console.log(par, "par");
      postAction(
        "/planmgt/erpProductScheduling/manualSchedulingSubmit",
        par
      ).then((res) => {
        console.log(res, "提交");
        if (res.code === 200) {
          this.$toast(res.message);
          this.$router.go(-1);
          this.loading = false;
        } else {
          this.$toast(res.message);
          this.loading = false;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/detail.scss";
.subimtForm {
  height: 0.6rem;
  line-height: 0.5rem;
  width: 100%;
  background: #fff;
  position: fixed;
  bottom: 0px;
  .button {
    width: 94vw;
    height: 0.39rem;
    text-align: center;
    margin-left: 3vw;
  }
}
</style>